var BINDBANK1 = `
<div>
    <div id='mask-bank1' v-if='open'></div>
    <transition enter-active-class='animated bounceIn'>
        <div id='mask-1-bank1' v-if='offBind=="1"'>
            <div class='mask-con'>
                <div class='dis-spa edit-tit-bank1'>
                    <span style="opacity:0;">1</span>
                    <span>绑定银行卡</span>
                    <img class='hover' @click='closeAlipy' src="./img/close.svg" style="width:22px;height:22px;">
                </div>
                <div class='mask-con-wrap-bank1'>
                    <div class='edit-input-bank1'>
                        <input type="text" placeholder="真实姓名" v-model='bindBankInfrom.name'>
                    </div>
                    <div class='mask-select-bank1'>
                        <el-select style="width:100%;" v-model="seleCerType" placeholder="证件类型">
                            <el-option key="1" label="二代身份证" value="二代身份证">
                            </el-option>
                        </el-select>
                    </div>
                    <div class='edit-input-bank1'>
                        <input type="text" placeholder="证件号码" v-model='bindBankInfrom.idCard'>
                    </div>
                    <p class='edit-noti-bank1' style='opacity:0;'>这里是一条提示内容</p>
                    <div class='edit-sure-bank1'>
                        <button @click='bindNext' class='hover'>下一步</button>
                    </div>
                </div>
            </div>
        </div>
    </transition>

    <transition enter-active-class='animated bounceIn'>
        <div id='mask-1' v-if='offBind=="2"'>
            <div class='mask-con'>
                <div class='dis-spa edit-tit-bank1'>
                    <span style="opacity:0;">1</span>
                    <span>绑定银行卡</span>
                    <img class='hover' @click='closeAlipy' src="./img/close.svg" style="width:22px;height:22px;">
                </div>
                <div class='mask-con-wrap-bank1'>
                    <div class='edit-input-bank1'>
                        <input type="text" placeholder="银行卡号" v-model='bindBankInfrom.bankAccount'>
                    </div>
                    <div class='mask-select-bank1'>
                        <el-select style="width:100%;" v-model="bindBankInfrom.bankName" placeholder="选择银行卡">
                            <el-option key="1" label="中国银行" value="中国银行">
                            </el-option>
                            <el-option key="2" label="工商银行" value="工商银行">
                            </el-option>
                        </el-select>
                    </div>
                    <div class='mask-select-bank1' style='margin-top: 10px;'>
                        <el-select style="width:100%;" v-model="seleCardType" placeholder="选择银行卡类型">
                            <el-option key="1" label="储蓄卡" value="储蓄卡">
                            </el-option>
                        </el-select>
                    </div>
                    <div class='dis-spa edit-invi-code-bank2' style='display:none;'>
                        <input type="text" placeholder="预留手机号" v-model='phone'>
                        <span class='hover'>获取验证码</span>
                    </div>
                    <div class='edit-input-bank1' style='display:none;'>
                        <input type="text" placeholder="验证码" v-model='code'>
                    </div>
                    <p class='edit-noti-bank1' style='opacity:0;'>这里是一条提示内容</p>
                    <div class='dis-spa bind-card-2-bank2'>
                        <button @click='offBind="1"' class='hover'>上一步</button>
                        <button @click='sureBind' class='hover'>确认绑定</button>
                    </div>
                </div>
            </div>
        </div>
    </transition>
</div>
`;
Vue.component('bind-bank1', {
    props: ['open'],
    data: function() {
        return {
            //1：绑定银行卡第一步  2：绑定银行卡第二步  false:不打开弹窗
            offBind: false,
            //证件类型  身份证等
            seleCerType: '二代身份证',
            //选择的卡的银行  中国银行等
            seleCard: '',
            //卡的类型  储蓄卡/借记卡
            seleCardType: '储蓄卡',
            //绑定银行卡所填信息
            bindBankInfrom: {},
            //预留手机号
            phone: '',
            //输入的验证码
            code: ''
        }
    },
    watch: {
        open: function(val) {
            if (val) {
                var user = JSON.parse(localStorage.getItem('shi_user'));
                if (user.NickName && user.IDCard) {
                    this.offBind = '2';
                } else {
                    this.offBind = '1';
                }
                this.replaceIcon();
            }
        },
        offBind: function(val) {
            this.replaceIcon();
        }
    },
    methods: {
        //关闭
        closeAlipy: function() {
            this.offBind = false;
            this.$emit('close_bank');
        },
        //替换下拉框图标
        replaceIcon: function() {
            this.$nextTick(function() {
                var par = $('.el-input__suffix-inner');
                par.children().remove();
                par.append('<img src="./img/down.svg" style="opacity:.5;width:20px;height:20px">');
            });
        },
        //绑定的下一步
        bindNext: function() {
            if (!this.bindBankInfrom.name) {
                this.$message.error('请输入正确的姓名');
                return;
            }
            if (!_checkIdCard(this.bindBankInfrom.idCard)) {
                this.$message.error('请输入正确的身份证信息');
                return;
            }
            this.offBind = "2";
        },
        //判斷实名
        sureBind: function() {
            // 6013888888888888888
            var This = this;
            var user = JSON.parse(localStorage.getItem('shi_user'));
            if (user.NickName && user.IDCard) {
                this.subBank();
            } else {
                if (!this.bindBankInfrom.name) {
                    this.$message.error('请输入正确的姓名');
                    return;
                }
                if (!_checkIdCard(this.bindBankInfrom.idCard)) {
                    this.$message.error('请输入正确的身份证信息');
                    return;
                }
                AJAX({
                    url: AUTHER_VERIFIED,
                    app: This,
                    token: true,
                    data: {
                        name: This.bindBankInfrom.name,
                        idCard: This.bindBankInfrom.idCard
                    },
                    success: function(data) {
                        if (data.Status == '0') {
                            This.subBank();
                        } else {
                            This.$message.error('提交实名信息失败');
                        }
                    }
                });
            }
        },
        //提交银行资料
        subBank: function() {
            if (!this.bindBankInfrom.bankAccount) {
                this.$message.error('请输入正确的银行卡信息');
                return;
            }
            if (!this.bindBankInfrom.bankName) {
                this.$message.error('请选择所属银行');
                return;
            }
            var This = this;
            AJAX({
                url: BIND_BANK,
                app: This,
                token: true,
                data: {
                    bankAccount: This.bindBankInfrom.bankAccount,
                    bankName: This.bindBankInfrom.bankName
                },
                success: function(data1) {
                    if (data1.Status == '0') {
                        This.$message.error('绑定银行卡成功');
                        This.bindBankInfrom = {};
                        This.closeAlipy();
                    } else {
                        This.$message.error('提交银行卡信息失败');
                    }
                }
            });
        },
        changeBind: function() {
            this.offBind = '2';
        }
    },
    template: BINDBANK1
});